<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <style>
        html,
        body {
            width: 100%;
            height: 100%;
        }
        .stage,
        .follow-me {
            background: url('img/600.jpg') 0 0 no-repeat;
            background-size: cover;
            background-attachment: fixed;
        }
        .stage {
            width: 100%;
            height: 100%;
            -webkit-filter: blur(10px);
            -moz-filter: blur(10px);
            -ms-filter: blur(10px);
            filter: blur(10px);
        }
        .follow-me {
            position: absolute;
            width: 300px;
            height: 300px;
            border-radius: 50%;
        }
    </style>
</head>
<body>
<div class="stage"></div>
<div class="follow-me"></div>
</body>
</html>

<script>
    function MouseFollower(follower) {
        var _this = this;

        this.follower = follower;
        this.currentCoords = {
            x: 0,
            y: 0
        };
        document.addEventListener('mousemove', this.handleMouseMove.bind(this));

        this.interval = setInterval(function() {
            _this.updateFollowerPos();
        }, 16);
    }

    MouseFollower.prototype.handleMouseMove = function(e) {
        this.currentCoords.x = e.x;
        this.currentCoords.y = e.y;
    };

    MouseFollower.prototype.updateFollowerPos = function() {
        this.follower.style.top = (this.currentCoords.y - 150) + 'px';
        this.follower.style.left = (this.currentCoords.x - 150) + 'px';
    }

    var follower = new MouseFollower(document.querySelector('.follow-me'));
</script>